<!--  -->
<template>
  <!-- 右侧菜单 -->
  <el-container class="main">
    <!-- 功能按钮组 -->
    <el-header height="42px" class="head">
      <span class="ik-info-title">
        <span class="svg-container ik-info-icon">
          <svg-icon icon-class="database" />
        </span>
        设置
      </span>
      <el-button-group class="ik-info-menu">
        <el-button class="ik-info-menu-btn" size="medium" @click="submit()">确认</el-button>
        <el-button class="ik-info-menu-btn" size="medium" @click="cancel()">取消</el-button>
      </el-button-group>
    </el-header>
    <el-main class="content">
      <el-row>

        <el-col :span="6">
          <span class="text">标题</span>
          <el-input v-model="title" placeholder="请输入标题" />
        </el-col>

        <el-col :span="6">
          <span class="text">后台地址</span>
          <el-input v-model="url" placeholder="http://......" />
        </el-col>

        <el-col :span="6">
          <span class="text">测试模式:</span>
          <el-radio v-model="model" label="0">否</el-radio>
          <el-radio v-model="model" label="1">是</el-radio>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      model: this.$store.getters['setting/getModel'],
      title: this.$store.getters['setting/getTitle'],
      url: this.$store.getters['setting/getUrl']
    }
  },
  methods: {
    // 确认点击事件
    submit() {
      // 修改设置值
      this.$store.dispatch('setting/set', { 'model': this.model, 'title': this.title, 'url': this.url })
      alert("修改成功！")
    },
    // 取消点击事件
    cancel() {
      this.$router.push({
        path: "/home"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.activeClass {
  .el-input__inner {
    border: 2px solid red !important;
  }
}
.main {
  height: 100%;
  width: 100%;
  position: relative;
  .head {
    .ik-info-title {
      background-color: #ffffff;
      color: #1482f0;
      margin-left: 25px;
      width: 300px;
      height: 42px;
      line-height: 48px;
    }
    .ik-info-menu {
      margin-top: 5px;
      margin-left: 20px;
      margin-right: 20px;
      float: right;
    }
    .ik-info-menu-btn:nth-child(1) {
      background-color: #1482f0;
      color: #ffffff;
      border-radius: 25px 0 0 25px;
    }
    .ik-info-menu-btn:nth-child(2) {
      background-color: #1482f0;
      color: #ffffff;
      border-radius: 0 25px 25px 0;
    }
    .ik-info-menu-btn.is-disabled {
      background-color: #aaaaaa;
      color: #ffffff;
    }
    .el-button:focus,
    .el-button:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
    .el-button.is-disabled:focus,
    .el-button.is-disabled:hover {
      background-color: #aaaaaa;
      color: #ffffff;
    }
  }

  .content {
    height: calc(100% - 42px);
    width: 100%;
    position: relative;
    // background-color: yellow;

    .el-row {
      width: 100%;
      height: auto;
      position: relative;
      .el-col {
        height: 80px;
        line-height: 80px;
        display: flex;
        .text {
          width: 100px;
          text-align: right;
          color: #606266;
          font-weight: 700;
          font-size: 14px;
        }
        .el-input {
          width: calc(100% - 100px);
          box-sizing: border-box;
          padding: 0 0 0 20px;
        }
        .el-radio {
          line-height: 80px;
          margin-left: 10px;
          background-color: transparent;
        }
      }
    }
  }
}
</style>
